<template>
  <el-menu-item
    v-if="
      (hasOneShowingChild(item.children, item) &&
        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
        !item.alwaysShow) ||
      (item.children.length < 2 && !item.hidden)
    "
    :index="resolvePath(item.fullPath)"
    @click="routerLink(onlyOneChild.fullPath)"
    :class="['sub-menu-more-list-item2']"
  >
    <span
      slot="title"
      :style="{
        'margin-left': item.children && item.children.length < 2 ? '0' : '8px',
      }"
      >{{ onlyOneChild.meta.title }}</span
    >
  </el-menu-item>

  <el-submenu
    v-else-if="
      !item.hidden &&
      !(
        hasOneShowingChild(item.children, item) &&
        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
        !item.alwaysShow
      ) &&
      item.children.length > 1
    "
    :index="resolvePath(item.fullPath)"
    :popper-append-to-body="false"
  >
    <template slot="title">
      <span slot="title" style="margin-left: 8px">{{ item.meta.title }}</span>
    </template>
    <top-nav-item
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-submenu>
</template>

<script>
export default {
  name: "TopNavItem",
  props: {
    // route object
    item: {
      type: Object,
      required: true,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    this.onlyOneChild = null;
    return {};
  },
  methods: {
    resolvePath(routePath) {
      if (!routePath.substr(1).includes("/")) {
        return routePath + "/index";
      }
      return routePath;
    },
    hasOneShowingChild(children = [], parent) {
      if (!children) {
        children = [];
      }
      const showingChildren = children.filter((item) => {
        if (item.hidden) {
          return false;
        } else {
          // Temp set(will be used if only has one showing child)
          this.onlyOneChild = item;
          return true;
        }
      });

      // When there is only one child router, the child router is displayed by default
      if (showingChildren.length === 1) {
        return true;
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
        return true;
      }

      return false;
    },
    routerLink(path) {
      this.$router.push({
        path: path,
        fullPath: path,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.sub-menu-more-list {
  width: 120px;
  overflow: hidden;

  .sub-menu-more-list-item2 {
    width: 120px;
    text-align: left;
    margin-left: 8px;
  }

  .more-item-active {
    background-color: rgb(18, 95, 165) !important;
  }
}

::v-deep.el-menu--horizontal .el-menu .el-menu-item {
  height: 36px !important;
  line-height: 36px !important;
}
::v-deep .el-menu--horizontal .el-menu .el-submenu__title {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px;
}
::v-deep .el-menu-item {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px !important;
  padding: 0 10px !important;
  margin: 0 !important;
}

::v-deep .el-menu--popup-bottom-start .el-submenu__icon-arrow {
  position: absolute !important;
  margin-top: -5px !important;
}

::v-deep .el-menu--horizontal .el-submenu.is-active .el-submenu__title {
  border-bottom: 0 !important;
}
</style>